<template>
  <section>
    <div class="order" v-show="isorder">
      <div class="order_header">订单列表</div>
      <section class="order_no_login">
        <h3>登录后查看外卖订单</h3>
        <button @click="login">立即登陆</button>
      </section>
    </div>
    <div class="orderList" v-show="isShow">
      <ul>
        <li>
          <div class="top">
            <img
              src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1363634644,2070593954&fm=26&gp=0.jpg"
              alt
            />
            <p>渝来鱼爱你.无刺酸菜鱼</p>
            <van-icon name="arrow" class="arrow" />
          </div>
          <div class="middle">
            <div class="middle-top">
              <span>公主番茄鱼(含米饭1份)</span>
              <span class="span1">X1</span>
            </div>
            <div class="middle-bottom">
              <span class="span2">2020-06-21 16:48</span>
              <span class="span3">实付￥20.8</span>
            </div>
          </div>
          <div class="bottom">
            <p>已取消</p>
            <button class="delete">删除</button>
            <button class="more">再来一单</button>
          </div>
        </li>
        <li>
          <div class="top">
            <img
              src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1363634644,2070593954&fm=26&gp=0.jpg"
              alt
            />
            <p>渝来鱼爱你.无刺酸菜鱼</p>
            <van-icon name="arrow" class="arrow" />
          </div>
          <div class="middle">
            <div class="middle-top">
              <span>公主番茄鱼(含米饭1份)</span>
              <span class="span1">X1</span>
            </div>
            <div class="middle-bottom">
              <span class="span2">2020-06-21 16:48</span>
              <span class="span3">实付￥20.8</span>
            </div>
          </div>
          <div class="bottom">
            <p>已取消</p>
            <button class="delete">删除</button>
            <button class="more">再来一单</button>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
import Vue from "vue";
import { Col, Icon } from "vant";
Vue.use(Icon);
import { mapState } from "vuex";
export default {
  data() {
    return {
      isShow: false,
      isorder: true,
    };
  },
  computed: {
    //获取vuex中 用户信息
    ...mapState("user", ["userInfo"]),
  },
  mounted(){
    if(this.userInfo ||JSON.parse(sessionStorage.getItem('userInfo'))){
      this.isShow=true,
      this.isorder=false
    }
  },
  methods: {
    login() {
      this.$router.push("/login");
    },
  },
};
</script>

<style lang="scss" scoped>
section {
  height: 100%;
  width: 100%;
  background-color: #f1f1f1;
  .order_header {
    height: 50px;
    background-color: #ffc135;
    text-align: center;
    color: #fff;
    font-size: 20px;
    line-height: 50px;
  }
  .order {
    .order_no_login {
      h3 {
        padding: 10 0;
        font-size: 20px;
        font-weight: normal;
        color: #6a6a6a;
        text-align: center;
        margin-top: 250px;
        color: #999;
      }
      button {
        display: inline-block;
        background: #ffc135;
        font-size: 18px;
        color: #fff;
        border: 0;
        outline: none;
        border-radius: 5px;
        padding: 10px 20px;
        margin-left: 130px;
        margin-top: 10px;
      }
    }
  }
  .orderList {
    width: 100%;
    height: 100%;
    ul {
      li {
        background-color: #fff;
        padding-left: 10px;
        margin-top: 15px;
        .top {
          display: flex;
          height: 70px;
          border-bottom: 1px solid #f1f1f1;
          line-height: 70px;
          font-size: 16px;
          img {
            width: 60px;
            height: 60px;
            margin-top: 5px;
            margin-right: 10px;
          }
          .arrow {
            margin-left: 110px;
            font-size: 20px;
            margin-top: 26px;
          }
        }
        .middle {
          height: 70px;
          border-bottom: 1px solid #f1f1f1;
          .middle-top {
            font-size: 15px;
            margin-top: 15px;
            .span1 {
              font-size: 14px;
              margin-left: 190px;
            }
          }
          .middle-bottom {
            margin-top: 15px;
            .span2 {
              font-size: 14px;
            }
            .span3 {
              margin-left: 180px;
              font-size: 15px;
            }
          }
        }
        div:nth-of-type(3) {
          height: 50px;
          border-bottom: 1px solid #f1f1f1;
          display: flex;
          line-height: 50px;
          p {
            font-size: 15px;
            color: #999;
          }
          .delete {
            margin-left: 175px;
            height: 30px;
            width: 50px;
            outline: none;
            border: 1px solid #ccc;
            line-height: 30px;
            background: #fff;
            font-size: 14px;
            margin-top: 10px;
            border-radius: 3px;
          }
          .more {
            margin-left: 15px;
            background: #ffd161;
            font-size: 14px;
            margin-top: 10px;
            outline: none;
            border: none;
            height: 30px;
            width: 70px;
            line-height: 30px;
            border-radius: 3px;
          }
        }
      }
    }
  }
}
</style>
